<template>
  <!-- <gvb_nav/> -->

  <div class="container">
    <h1 class="title">短链生成系统</h1>
    <div class="card">
      <!-- 输入框区域 -->
      <div class="form-group">
        <label for="1">长链接:</label>
        <input id="1" type="text" v-model="LongUrl" placeholder="请输入要缩短的长链接" />
      </div>
      <div class="form-group">
        <label for="2">有效时长 (小时):</label>
        <input id="2" type="text" v-model="UsedTime" placeholder="请设置有效时间" />
      </div>
      <div class="form-group">
        <label for="3">自定义短链接:</label>
        <input id="3" type="text" v-model="CustomCode" placeholder="请输入自定义短链接" />
      </div>

      <!-- 生成按钮 -->
      <button class="generate-btn" @click="produce">生成短链</button>

      <!-- 显示返回结果 -->
      <div v-if="generatedShortUrl || expirationTime" class="result-container">
        <h2 class="result-title">生成结果</h2>
        <div class="result-group">
          <label>短链接:</label>
          <input type="text" v-model="generatedShortUrl" readonly />
        </div>
        <div class="result-group">
          <label>过期时间:</label>
          <input type="text" v-model="expirationTime" readonly />
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import gvb_nav from '../components/Mweb_nav.vue';

  export default {
    components: {
      gvb_nav,
    },
    data() {
      return {
        LongUrl: "",
        CustomCode: "",
        UsedTime: null,
        generatedShortUrl: "", // 后端返回的短链接
        expirationTime: "", // 后端返回的过期时间
      };
    },

    methods: {
      produce() {
        this.$axios
          .post("http://localhost:8080/api/v1/shorturl", {
            long_url: this.LongUrl,
            custom_code: this.CustomCode,
            used_time: this.UsedTime,
          })
          .then((resp) => {
            console.log("生成成功:", resp.data);
            this.generatedShortUrl = resp.data.short_url; // 假设后端返回的字段是 short_url
            this.expirationTime = resp.data.expires_at; // 假设后端返回的字段是 expires_at
          })
          .catch((error) => {
            console.error("请求失败:", error.response ? error.response.data : error.message);
          });
      },
    },
  };
</script>

<style scoped>
/* 背景样式 */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: #fff;
  font-family: 'Arial', sans-serif;
  padding: 20px;
  box-sizing: border-box;
}

/* 标题样式 */
.title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

/* 卡片容器 */
.card {
  background-color: #ffffff;
  color: #333;
  width: 100%;
  max-width: 600px;  /* 适配不同屏幕 */
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 表单分组样式 */
.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* 保证 label 和 input 水平居中 */
}

label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
  text-align: center; /* 确保标签居中 */
}

input {
  width: 80%; /* 使输入框占据 80% 宽度，增加居中感 */
  padding: 12px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: border-color 0.3s ease;
  margin-bottom: 15px; /* 为输入框增加底部间距 */
}

input:focus {
  border-color: #2575fc;
  outline: none;
  box-shadow: 0 0 8px rgba(37, 117, 252, 0.2);
}

/* 按钮样式 */
.generate-btn {
  display: block;
  width: 80%; /* 按钮宽度与输入框一致 */
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #2575fc;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease;
  margin: 0 auto; /* 确保按钮水平居中 */
  margin-top: 20px; /* 为按钮增加顶部间距 */
}

.generate-btn:hover {
  background-color: #1a5fcb;
}

/* 结果显示容器 */
.result-container {
  margin-top: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.result-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.result-group {
  margin-bottom: 10px;
}

.result-group input {
  background-color: #f1f1f1;
  border: none;
  color: #333;
  cursor:text;
}
</style>
